/*
* @Author: majingyu
* @Date:   2017-04-25 16:36:55
* @Last Modified by:   jingyu.ma
* @Last Modified time: 2017-07-25 22:53:43
*/

import React from 'react';
import { connect } from 'react-redux';
import SkillList from 'components/skillList.jsx';
import { local } from 'common/local.js';
import { eidtServiceTab, eidtSkillInfoAction, editSortList, editFilterList } from 'action/service.js';
import 'css/services.less';
import { changeCommentId } from 'action/commont.js';

const servicesData = (state) => {
    return {
        app:state.app,
        services: state.services
    }
}
class Services extends  React.Component{
    constructor(props){
        super(props);
        let localStation = local();
        this.state = {
            lat: localStation.lat,
            lng: localStation.lng,
            showCondition: '',
            sortId: '',
            sex: '',
            age:'',
            distance:'',
            clasSort: 'tirm-info sortList hid',
            clasFilter: 'tirm-info sortList hid'
        }
        this.getList();
        this.getFilter();
        this.getSortList();
    }
    changeSort(id){
        let clasSort = 'tirm-info sortList hid';
        this.setState(Object.assign({},this.state,{
            sortId: id,
            clasSort: clasSort
        }))
        this.getList(id) 
    }
    getList(sortId){
        let data= {
            pageNumber: this.props.services.nearSkillList.pageNo,
            pageSize: 10,
            distance : 15,
            lat:this.state.lat,
            lng:this.state.lng
        }
        this.props.changeList(data);
    } 
    setTrim(status){
        let clasSort = this.state.clasSort,
            clasFilter = this.state.clasFilter;
        if(status == 1){
            clasSort = 'tirm-info sortList show';
        }else if(status == 2){
            clasFilter = 'tirm-info sortList show';
        }else{
            clasSort = 'tirm-info sortList hid';
            clasFilter = 'tirm-info sortList hid' ;
        }

        this.setState(Object.assign({},this.state,{
            showCondition: status,
            clasSort: clasSort,
            clasFilter: clasFilter
        }))
        
    }
    cacal(){
        let clasFilter = 'tirm-info sortList hid' ;
        this.setState(Object.assign({},this.state,{
            clasFilter: clasFilter
        }))
    }
    confirm(){
        let clasFilter = 'tirm-info sortList hid' ;
        this.setState(Object.assign({},this.state,{
            clasFilter: clasFilter
        }))
        this.getList();
    }
    getSortList(){
        this.props.getSortList();
    }
    getFilter(){
        this.props.getFilter();
    }
    isActive(id,key){
        return id == this.state[key]?'active':''
    }
    changeFilter(key,id){
        let params = {};
        params[key] = id;
        this.setState(Object.assign({},this.state,params))
    }
    isSortAtive(id){

        return id == this.state.sortId?'active sort-list':'sort-list'
    } 
    commontList(id){
        this.props.changeCommentId(id);
        window.location.href = '#/DemandOrSkill';
    }
    clickTips(id){
        let params = {
            id: id
        }
        this.props.dispatch(addTips(params));
    }
    render(){
        let condition = this.state.showCondition;
        let self = this;
        return(
            <div className='content'>
                <div className="search-term">
                    <div className="head-info">
                        <span className="title" onClick={() => {this.setTrim(1)}}>排序</span>
                        <span className="title" onClick={() => {this.setTrim(2)}}>筛选</span>
                    </div>
                    <ul className={this.state.clasSort}>
                    {
                        this.props.services.sortList.map((item) => {
                            return(
                                <li className={this.isSortAtive(item.id)} key={item.id} onClick={()=>{this.changeSort(item.id)}}>
                                    {item.name}
                                </li>
                            );
                        }) 
                    }
                    </ul>
                    <div className={this.state.clasFilter}>
                        <ul >
                        {
                            this.props.services.varfilterList.map((item) => {
                                return(
                                    <li className='filter-info' key={item.id}>
                                        <p className="name">{item.name}:</p>
                                        {
                                            item.list.map((n) => {
                                                return(
                                                     <span  className={self.isActive(n.id,item.key)} key={n.id} onClick={()=>{this.changeFilter(item.key,n.id)}}>{n.name}</span>
                                                )                                               
                                            })
                                        }
                                    </li>
                                )                                
                            })
                        }
                        </ul>
                        <a className="cacal btn" onClick={()=>{this.cacal()}}>取消</a>
                        <a className="confirm btn" onClick={()=>{this.confirm()}}>确定</a>
                    </div>
                </div>
                <div className="service-detail-list">
                    <SkillList skillList = {this.props.services.nearSkillList} goSkillList={(id) => {this.goSkillList(id)}} clickTips={(id) => {this.clickTips(id)}} inviteOrder={(id)=>{this.inviteSkillOrder(id)}} goScoll={() => {this.getScollDemand()}} getMoreList={() => {this.getMoreList()}}/>
                </div>
                
            </div>
            
        );
        
    }
}
let dispatchHandle = (dispatch, getState) => {
    return {
        changeList(data){
            dispatch(eidtSkillInfoAction(data));
        },
        getSortList(){
            dispatch(editSortList());
        },
        getFilter(){
            dispatch(editFilterList());
        },
        changeCommentId(id){
            dispatch(changeCommentId(id));
        }
    }
    
}
let visibileservice= connect(servicesData, dispatchHandle)(Services);

export default visibileservice;